<template>
  <div class="custom-nav-body" :style="[`padding-top:${customHeight}px`]">
    <div class="custom-nav" :style="customStyles">
      <div
        v-if="!beforePage"
        class="custom-nav-left-inner"
        :style="[
          `height:calc(${innerHeight}px - 2px)`,
          `line-height:calc(${innerHeight}px - 2px)`,
          `border-radius:${innerHeight}px`,
          `width:${rightInner.width}px`,
          `margin-right:calc(750rpx - ${rightInner.right}px);`,
        ]"
      >
        <template v-if="back">
          <div class="icon icon-zuo-1" @click="goBack"></div>
          <div class="inner-hr"></div>
          <div class="icon icon-home" @click="goHome"></div>
        </template>
        <template v-else>
          <div class="icon icon-home"></div>
          <div class="inner-hr"></div>
          <div class="icon icon-caidan"></div>
        </template>
      </div>
      <div
        class="custom-nav-title"
        :class="beforePage ? 'left' : 'center'"
        :style="[
          `height:${innerHeight}px`,
          `width:calc(100% - ${rightInner.width}px - (750rpx - ${rightInner.right}px))`,
        ]"
      >
        {{ title }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "customNav",
};
</script>
<script setup lang="ts">
import { computed, onMounted, ref, StyleValue, getCurrentInstance } from "vue";

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    title: string;
    back?: boolean;
  }>(),
  {
    title: "",
    back: true,
  }
);

// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();

const statusBarHeight = ref<number>(systemInfo.statusBarHeight || 0);

// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
const rightInner = ref<{
  width: number;
  height: number;
  top: number;
  bottom: number;
  right: number;
}>(uni.getMenuButtonBoundingClientRect());

// 导航栏高度
const customHeight = ref<number>(statusBarHeight.value + 44);

const innerHeight = ref<number>(rightInner.value.height);

// 导航栏左胶囊的样式
const leftInnerStyle = computed<StyleValue>(() => {
  return [`height:${customHeight.value}px`];
});

// 导航栏的样式
const customStyles = computed<StyleValue>(() => {
  return [
    `height:${rightInner.value.height}px;`,
    `padding-top:${rightInner.value.top}px`,
    `padding-bottom:${
      customHeight.value - rightInner.value.height - rightInner.value.top
    }px`,
    `padding-left:calc(750rpx - ${rightInner.value.right}px);`,
    `padding-right:calc((750rpx - ${rightInner.value.right}px) * 2 + ${rightInner.value.width}px);`,
  ];
});

const beforePage = ref<boolean>(props.back);

const openMenu = () => {
  //   proxy?.$refs["menuPopup"]?.open();
};

const goBack = () => {
  if (beforePage.value) {
    uni.navigateBack();
  } else {
    goHome();
  }
};

const goHome = () => {
  uni.switchTab({
    url: "/pages/index/index",
  });
};

onMounted(() => {
  var pages = getCurrentPages(); //当前页
  if (
    pages[pages.length - 2] !== undefined &&
    !$utils.inArray(pages[pages.length - 1].route, $utils.tabbarList)
  ) {
    beforePage.value = true;
  }
  //   beforePage.value = false;
});
</script>


<style scoped>
.custom-nav {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.custom-nav-left-inner {
  border: 1px solid rgba(220, 220, 220, 1);
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.custom-nav-left-inner .icon {
  width: calc(50% - 1rpx);
  font-size: var(--base-size-large-xx);
  text-align: center;
  height: 100%;
}
.custom-nav-left-inner .inner-hr {
  width: 1rpx;
  background: rgba(0, 0, 0, 0.1);
  height: 50%;
}
.custom-nav-title {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  /* width: 100%;
    height: 100%; */
}
.custom-nav-title.left {
  justify-content: flex-start;
}
.custom-nav-title.center {
  justify-content: center;
}
</style>
